<script lang="ts" setup>
import OverviewGraph from "./OverviewGraph.vue";
import ProductBox from "../Common/ProductBox.vue";
import {
  PayCircleOutlined,
  QuestionCircleFilled,
} from "@ant-design/icons-vue";
import { useUserStore } from "../../../utils/store/store";
import { userType } from "../../../utils/ts/user";
import { computed } from "vue";
import OverviewBox from "./OverviewBox.vue";
import OverviewEntry from "./OverviewEntry.vue";
import { useRouter } from "vue-router";
const store = useUserStore();
const userData = computed<userType | null>(() => store.getUser());
const router = useRouter()

const toApi = () => {
  // (window.location.href = "/#/finance/bills")
  router.push({
    path: "/finance/bills"
  })
};
</script>
<template>
  <ProductBox title="总览">
    <div class="pr-5 pl-5">
      <div class="flex flex-wrap walletBg pt-5 rounded pr-5 pl-5 mb-5">
        <div class="flex-1 pb-5">
          <h2 class="font-bold text-lg text-slate-400 flex items-center">
            <PayCircleOutlined />
            <span class="ml-1 mr-2">账户余额</span>
            <a-tooltip placement="topLeft" title="充值入款、赠送入款等..." arrow-point-at-center>
              <QuestionCircleFilled />
            </a-tooltip>
          </h2>

          <!-- items-end -->
          <div class="flex">
            <div class="flex items-end w-25">
              <span class="text-3xl font-bold text-yellow-500 leading-none">
                {{ userData?.bal }}
              </span>
              <span class="leading-6">元</span>
            </div>

            <a-button type="primary" size="large">
              <router-link to="/finance/charge">
                充 值
              </router-link>
            </a-button>
          </div>
        </div>
        <!-- <div class="flex-1 pb-5">
          <h2 class="font-bold text-lg text-slate-400 flex items-center">
            <MoneyCollectOutlined />
            <span class="ml-1 mr-2">可提现余额</span>
            <a-tooltip placement="topLeft" title="充值入款、赠送入款等..." arrow-point-at-center>
              <QuestionCircleFilled />
            </a-tooltip>
          </h2>
          <div class="flex">
            <div class="flex items-end w-25">
              <span class="text-3xl font-bold text-yellow-500 leading-none">
                {{ userData?.bal }}
              </span>
              <span class="leading-6">元</span>
            </div>

            <router-link to="/finance/withdraw">
              <a-button type="primary" size="large">
                提现
              </a-button>
            </router-link>
            <router-link to="/finance/withdrawRecord" class="self-end">
              <a-button type="link" size="middle">
                提现记录
              </a-button>
            </router-link>
          </div>
        </div> -->
      </div>

      <div class="flex walletBg rounded p-5 mb-5 pb-0 flex-wrap">
        <div class="flex-1 pb-5">
          <h3 class="text-slate-400 mb-5">积分余额</h3>
          <div class="flex items-center">
            <span class="whitespace-nowrap">{{ userData?.bal }}</span>
            <router-link to="/finance/score">
              <a-button type="link">积分明细</a-button>
            </router-link>
          </div>
        </div>

        <div class="flex-1">
          <h3 class="text-slate-400 mb-5">可开票金额</h3>
          <div class="flex items-center">
            <span class="whitespace-nowrap">{{ userData?.bal }}元</span>
            <router-link to="/finance/applyReceipt">
              <a-button type="link">申请开票</a-button>
            </router-link>
          </div>
        </div>

        <div class="flex-1">
          <h3 class="text-slate-400 mb-5">已申请合同</h3>
          <div class="flex items-center">
            <span class="whitespace-nowrap">0 份</span>
            <router-link to="/finance/applyContract">
              <a-button type="link">申请合同</a-button>
            </router-link>
          </div>
        </div>
      </div>

      <div class="flex w-full flex-wrap">
        <OverviewBox title="待支付订单" class="flex-1 mb-1">
          <template #icon>
            <img src="/console/order.png" alt="order" class="h-5 w-5" />
          </template>
          <template #content>
            <div class="flex flex-wrap mt-5">
              <OverviewEntry v-for="(_, _2) in [1, 2, 3]" class="w-130 mb-3 mr-5 pb-2 pt-3">
                <template #left>
                  <span class="text-sm">123456789</span>
                </template>

                <template #right>
                  <span class="text-sm">0</span>
                </template>

                <template #bottom>
                  <span class="text-sm">2021-05-06</span>
                </template>
              </OverviewEntry>
            </div>
          </template>
        </OverviewBox>

        <div class="w-1"></div>

        <OverviewBox title="待续费业务" class="flex-1 mb-1">
          <template #icon>
            <img src="/console/order.png" alt="order" class="h-5 w-5" />
          </template>
          <template #content>
            <div class="flex flex-wrap mt-5">
              <OverviewEntry v-for="(_, _2) in [1, 2, 3]" class="w-130 mb-3 mr-5 pb-2 pt-3">
                <template #left>
                  <span class="text-sm">123456789</span>
                </template>

                <template #right>
                  <span class="text-sm">0</span>
                </template>

                <template #bottom>
                  <span class="text-sm">2021-05-06</span>
                </template>
              </OverviewEntry>
            </div>
          </template>
        </OverviewBox>

        <div class="w-1"></div>

        <OverviewBox title="消费趋势" class="flex-1 mb-1 hidden md:block">
          <template #icon>
            <img src="/console/order.png" alt="order" class="h-5 w-5" />
          </template>
          <template #content>
            <OverviewGraph />
          </template>
        </OverviewBox>
      </div>

      <OverviewBox title="API使用周期" class="mt-5">
        <template #icon>
          <img src="/console/time-fill.png" alt="" class="h-5 w-5" />
        </template>
        <template #tip>
          <div class="flex">
            <a-tooltip placement="topLeft" title="充值入款、赠送入款等..." arrow-point-at-center>
              <img src="/console/question-circle-fill.png" alt="question" class="h-5 w-5 hidden md:block" />
            </a-tooltip>

            <span class="font-bold ml-2 text-sm">
              注：不同API，周期内使用次数可能与详情列表展示订单数不一致，如短信内容过长，列表只有一条订单记录，使用次数2次
            </span>
          </div>
        </template>
        <template #content>
          <div class="flex flex-wrap mt-5">
            <OverviewEntry v-for="(_, _2) in [1, 2, 3, 4, 5, 6]" class="w-130 mb-3 mr-5 cursor-pointer" @click="toApi">
              <template #left>
                <span class="text-sm">国内短信api</span>
              </template>
              <template #right>
                <span class="text-sm">0</span>
              </template>
            </OverviewEntry>
          </div>
        </template>
      </OverviewBox>
    </div>
  </ProductBox>
</template>
<style lang="scss" scoped>
.walletBg {
  background-color: #f5f7fa;
}
</style>
